<template>
    <CommonContainer title="基础信息">

        <el-row :gutter="30">
            <el-col :span="viewType==1?20:24">
                <el-descriptions>
                    <el-descriptions-item label="模版名称">{{ detailInfo.templateName }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="detailInfo.templateClassification>1" label="关联客户">
                        <div class="flex-row-center-sb" style="padding-right: 20px">
                            <div>{{ detailInfo.customerNames }}</div>
                            <div v-if="detailInfo.approvalStatus==0||detailInfo.approvalStatus==2" style="font-size: 14px;color:#1890FF; margin-left: 15px" @click="managerCustomer">管理客户
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="detailInfo.templateClassification==2" label="公司标准模版"> {{ detailInfo.companyStandardTemplateName }}</el-descriptions-item>
                    <el-descriptions-item label="模版类型"> {{ detailInfo.templateType == 2 ? '续租模版' : '租赁模版' }}</el-descriptions-item>
                    <el-descriptions-item label="客户类型" v-if="detailInfo.templateClassification==1">
                        <dict-tag :options="dict.type.customer_type" :value="detailInfo.customersType"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="产品方案"> {{ detailInfo.planName }}</el-descriptions-item>
                    <el-descriptions-item label="新/旧车">
                        <dict-tag :options="dict.type.new_or_old_cars" :value="detailInfo.newOrOldCars"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="是否带驾">
                        <dict-tag :options="dict.type.business_yes_no" :value="detailInfo.leadingTheDriver"/>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="detailInfo.templateClassification>1" label="仅适用于此额度申请">
                        <dict-tag :options="dict.type.business_yes_no" :value="detailInfo.onlyThis"/>
                    </el-descriptions-item>
                    <template v-if="detailInfo.templateSource==1">
                        <el-descriptions-item label="说明" :span="3">
                            {{ detailInfo.templateRemark }}
                        </el-descriptions-item>
                        <el-descriptions-item  :span="3" label="附件">
                            <image-common v-model="detailInfo.templateAnnex" disabled :up-type="2"></image-common>
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
            </el-col>
            <el-col :span="4" v-if="viewType==1">
                <div class="suggestionInfo">
                    <div class="apprvalStatus flex-xy-center"
                         :class="[detailInfo.approvalStatus==0 ?'active0':'',detailInfo.approvalStatus==1 ?'active1':'',detailInfo.approvalStatus==3?'active2':'',detailInfo.approvalStatus==2?'active3':'']">
                        <dict-tag :options="dict.type.approval_status" :value="detailInfo.approvalStatus"/>
                    </div>
                </div>
            </el-col>
        </el-row>
    </CommonContainer>
</template>

<script>
export default {
    dicts: ['new_or_old_cars', 'customer_type', 'business_yes_no', 'approval_status'],
    components: {},
    props: {
        detailInfo: {
            type: Object,
            default: {}
        },
        viewType:{
            type:Number,
            default: 1
        }
    },
    data() {
        return {}
    },
    computed: {},
    methods: {
        managerCustomer(){
            this.$emit('managerCustomer')
        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.suggestionInfo {
    position: relative;

    .apprvalStatus {
        position: absolute;
        top: 10px;
        right: 40px;
        width: 80px;
        height: 80px;
        font-size: 14px;
        text-align: center;
        border-radius: 40px;

        &.active0 {
            color: #1890FF;
            border: #1890FF solid 1px;
        }

        &.active1 {
            color: orange;
            border: orange solid 1px;
        }

        &.active2 {
            color: red;
            border: red solid 1px;
        }

        &.active3 {
            color: green;
            border: green solid 1px;
        }
    }
}
</style>
